<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>心理测试</title>
  <link rel="stylesheet" href="css/my.css"> <!-- 公共样式 -->
  <link rel="stylesheet" href="css/question_BSD.css"> <!-- 私有样式 -->
  <link rel="stylesheet" href="css/vant.css">
  <script type="text/javascript" src="js/jweixin-1.3.2.js"></script> <!-- 微信sdk -->
  <script type="text/javascript" src="js/rem.js"></script> <!-- 适配js -->
  <script type="text/javascript" src="js/vue.js"></script> <!-- vue.js -->
  <script type="text/javascript" src="js/axios.min.js"></script> <!-- axios.js -->
  <script src="js/vant.min.js"></script>

</head>

<body>
  <div id="app" class="app" >
    <img v-if="indexFlag==-1" :src="startUrl+'/questionBSD1.png'" alt="" class="img1" @click="toIndex">
    <img v-if="indexFlag==-1" :src="startUrl+'/questionBSD2.png'" alt="" class="img2">
    <div class="message" v-if="indexFlag==-1">
      <p class="title">个人信息</p>
      <div class="formBox">
        <van-field v-model="otherData.userName" label="姓名" label-width="1.7rem" maxlength="15" placeholder="请输入">
        </van-field>
        <van-field @click="openShow('1')" v-model="otherData.sex" center readonly clickable is-link label="性别"
          label-width="1.7rem" placeholder="请选择"></van-field>
        <van-field @click="openTimeShow" v-model="otherData.bir" center readonly clickable is-link label="出生日期"
          label-width="1.7rem" placeholder="请选择"></van-field>
          <van-field type="number" v-model="otherData.peoHeight" label="身高" label-width="1.7rem"  placeholder="请输入">
            <template #button>cm</template>
          </van-field>
          <van-field type="number" v-model="otherData.peoWeight" label="体重" label-width="1.7rem" placeholder="请输入">
            <template #button>kg</template>
          </van-field>
        <van-field v-model="otherData.edu" @click="openShow('2')" center readonly clickable is-link label="受教育水平"
          label-width="1.7rem" placeholder="请选择"></van-field>

          <van-field type="number" v-model="otherData.timeLong" label="学球时长" label-width="1.7rem" placeholder="请输入">
            <template #button>小时</template>
          </van-field>
          <van-field type="number" v-model="otherData.fre" label="周训练次数" label-width="1.7rem" placeholder="请输入">
            <template #button>次</template>
          </van-field>
         <div>
          <p class="msp">每次训练总时长</p>
          <van-field type="number" v-model="otherData.tduration" label="" label-width="0" placeholder="请输入">
            <template #button><p style="color: #969799">小时</p></template>
          </van-field>
         </div>
      <div>
          <p class="msp">最近五场球的平均杆数</p>
          <van-field v-model="otherData.average" label="" maxlength="15" label-width="0" placeholder="请输入">
          </van-field>
         </div>
          <div>
          <p class="msp">最高获胜名次及比赛名称</p>
          <van-field  v-model="otherData.mH" label="" maxlength="30" label-width="0" placeholder="请输入">
          </van-field>
         </div>
         <div>
          <p class="msp">参加高尔夫球训练比赛的目的</p>
          <van-field style="height:2rem !important;line-height:0.4rem !important;padding-top:0.4rem !important" type="textarea" v-model="otherData.goal" label="" maxlength="50" label-width="0" placeholder="请输入">
          </van-field>
         </div>
      </div>
    </div>
    <div class="startBtn" @click='start' v-if="indexFlag==-1">开始答题</div> 
    
     <!-- 选择日期 -->
    <van-popup v-model="timeSelectShow" position="bottom">
      <van-datetime-picker  @cancel="timeSelectShow=false" @confirm="onConfirm1" :min-date="timeObj.minDate" v-model="timeObj.currentDate" type="date" title="选择出生日期" />
    </van-popup>

    <!-- 其余select弹窗 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>


    <!-- 登录弹窗 -->
    <van-popup v-model="loginShow" round :close-on-click-overlay="false">
      <div class="loginBox">
        <van-field v-model="loginObj.mobile" type="tel" label="手机号" maxlength='11' label-width="1.5rem"
          placeholder="手机号">
        </van-field>
        <van-field v-model="loginObj.captchaCode" label="验证码" label-width="1.5rem" maxlength="4" placeholder="验证码">
          <template #button>
            <img :src="codeImgUrl" alt class="qrcodeImg" @click="getCodeImg" />
          </template>
        </van-field>
        <van-field v-model="loginObj.mailCode" type="number" label="短信验证码" label-width="1.5rem" maxlength="4"
          placeholder="短信验证码">
          <template #button>
            <van-button size="small" class="codeStyle" v-if="qrcodeTitle=='获取验证码'" @click="getCode">{{qrcodeTitle}}
            </van-button>
            <van-button size="small" class="codeStyle" v-else>{{qrcodeTitle}}</van-button>
          </template>
        </van-field>
        <div class="btn" @click="loginBtn">登录</div>
        <div class="xy">
          <van-checkbox style="margin-bottom:0 !important" shape="square" name="1" v-model="check"
            checked-color="#12B0DB" icon-size="0.25rem"></van-checkbox>
          <div class="mes">
            同意
            <span class="mainColor" @click="toWebUrl('1')">《用户协议》</span>
            <span class="mainColor" @click="toWebUrl('2')">《隐私政策》</span>
            <span class="mainColor" @click="toWebUrl('3')">《灵活就业服务协议》</span>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 答题模块 -->
  <div class="startQuestionApp" v-if="indexFlag>-1">
      <div class="questionBox">
          <div class="formItem" v-for="(item,index) in list" :key="item.id" v-show="indexFlag==index">
            <div class="titles">{{index+1}}、{{item.stem}}</div>
            <van-radio-group v-model="item.answer" checked-color="#12B0DB" icon-size="0.36rem"
              @change="setRadio(item,index,$event)" v-if="item.type==1">
              <van-radio :name="itemChildren.label" v-for="(itemChildren,indexChildren) in item.options">
                {{itemChildren.label}}、{{itemChildren.value}}
              </van-radio>
            </van-radio-group>
            <van-field @blur='setInput(item,index,$event)' style="height:3rem !important;line-height:normal !important" v-model="item.answer" maxlength="100" label-width="0" type="textarea" placeholder="请输入" v-if="item.type==3">
            </van-field>
            <!-- <van-checkbox-group v-model="item.answer" checked-color="#12B0DB" icon-size="0.36rem"
              @change="setCheckBox(item,index,$event)" v-if="item.type==2">
              <van-checkbox shape="square" :name="itemChildren.label"
                v-for="(itemChildren,indexChildren) in item.options">{{itemChildren.label}}、{{itemChildren.value}}
              </van-checkbox>
            </van-checkbox-group> -->
          </div>
      </div>
      <div class="btnBox">
          <div class="prevBtn" @click="prevBtn" v-if="indexFlag>=1">上一题</div>
          <div class="nextBtn" @click="nextBtn" v-if="indexFlag<list.length-1&&list[indexFlag].answer">下一题</div>
          <div class="nextBtn nextBtnDis" v-if="indexFlag<list.length-1&&list[indexFlag].answer==''">下一题</div>
          <div class="nextBtn nextBtnDis" v-if="indexFlag==list.length-1&&list[indexFlag].answer==''">完成提交</div>
          <div class="nextBtn" @click="submit" v-if="indexFlag==list.length-1&&list[indexFlag].answer">完成提交</div>
      </div>
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app", //挂载点
      data: {
        indexFlag:-1, // 显示模块
        userDetail:{},
        getToken:"",
        // 登录区域--开始
        loginObj: {
          mobile: "", // 手机号
          captchaCode: "", // 验证码
          mailCode: "", // 短信验证码
        },
        qrcodeTitle: "获取验证码", // 发送验证码文案
        codeImgUrl: "", // 图片
        check: "",
        sidNumber: "",
        loginShow: false, // 登录弹窗
        // 登录区域--结束

        showPicker: false,  // select显示隐藏
        showPickerType: "", // select类型
        timeSelectShow:false, // 日期选择组件显示
        // config: "http://job-dev.gogowork.cn:4080/gogojob-ucenter",
        config:"/gogojob-ucenter",
        startUrl: "https://job-img.gogowork.cn/static/img",
        timeObj:{   // 日期绑定值
          minDate: new Date(1930, 0, 1),
          currentDate: new Date(),
        },
        answerId:0,
        otherData: {
          userName:"", // 姓名
          sex:"", //性别
          bir: "", // 出生日期
          peoHeight: "", // 身高
          peoWeight: "", // 体重
          edu: "", // 受教育水平
          timeLong: "", // 学球时长
          fre: "", // 周训练次数
          tduration: "", // 每次训练总时长
          average: "", // 最近五场球的平均杆数
          mH: "", // 最高获胜名次及比赛名称
          goal: "", // 参加高尔夫球训练比赛的目的
        },
        columns: [], // select列表
        list: [], //试题
        surveyQuestionAnswerLogBatchParamList: [], //答题数组
      },
      methods: {
           // 点击下一题
        nextBtn(){
          // if(this.indexFlag>this.surveyQuestionAnswerLogBatchParamList.length-1){
          //   this.$toast('请先答完该题目')
          // }else{
            this.indexFlag++
          // }
        },
           // 点击上一题
          prevBtn(){
           this.indexFlag--
        },
        // 开始答题
        start(){
         if (this.otherData.userName == '') {
            this.$toast('请输入姓名')
          }else if(this.otherData.sex == ''){
            this.$toast('请选择性别')
          }else if(this.otherData.bir == ''){
            this.$toast('请选择出生日期')
          }else if(this.otherData.peoHeight == ''){
            this.$toast('请输入身高')
          }else if(this.otherData.peoWeight == ''){
            this.$toast('请输入体重')
          }else if(this.otherData.edu == ''){
            this.$toast('请选择受教育水平')
          }else if(this.otherData.timeLong == ''){
            this.$toast('请选输入学球时长')
          }else if(this.otherData.fre == ''){
            this.$toast('请输入周训练次数')
          }else if(this.otherData.tduration == ''){
            this.$toast('请输入每次训练总时长')
          }else if(this.otherData.average == ''){
            this.$toast('请输入最近五场球的平均杆数')
          }else if(this.otherData.mH == ''){
            this.$toast('请输入最高获胜名次及比赛名称')
          }else if(this.otherData.goal == ''){
            this.$toast('请输入参加高尔夫球训练比赛的目的')
          }else{
            this.indexFlag = 0;
          }
        },
     
        // 前往小程序
        toIndex() {
          var isMiniProgram = window.navigator.userAgent.toLocaleLowerCase().indexOf('miniprogram') > -1;
          if (isMiniProgram) {
            wx.miniProgram.redirectTo({
              url: '/pages/tabBar/index/index?userDetail='+JSON.stringify(this.userDetail)
            })
          } else {
            window.location.href = 'https://www.gogowork.cn/h5/index.html?regInviteId=' + (window.sessionStorage
              .getItem("uid") || 0)+"&path=/pages/tabBar/index/index"

          }
        },
        // 打开日期弹窗
        openTimeShow(){
         this.timeSelectShow = true;
        },
        // 打开其余弹窗
        openShow(type) {
          this.showPickerType = type;
          if (type == 1) {
            this.columns = ['男', '女']
          } else if (type == 2) {
            this.columns = ['小学','初中','高中','高职','技校','本科','硕士','博士']
          } 
          this.showPicker = true;
        },
        // 关闭弹窗
        onCancel() {
          this.showPicker = false;
          this.columns = [];
          this.showPickerType = "";
        },
        // 确认其余弹窗
        onConfirm(e) {
          if (this.showPickerType == 1) {
            this.otherData.sex = e;
          } else if (this.showPickerType == 2) {
            this.otherData.edu = e;
          } 
          this.onCancel()
        },
        // 确认日期弹窗
        onConfirm1(e) {
          const date = new Date(e)
          const formar = date.toISOString().split("T")[0]
          console.log(formar,'formar');
          
          this.otherData.bir = formar;
          this.timeSelectShow = false;
        },
        // 获取数据
        getList() {
          axios({
            url: this.config + "/survey/question/page",
            method: "get",
            headers: {
              'token':this.getToken
            },
            params: {
              pageNum: 1,
              pageSize: 100,
              surveyId: 2
            }
          }).then(res => {
            if (res.data.code == 200) {
              if (res.data.data == 401) {
                this.loginObj = {
                  mobile: "", // 手机号
                  captchaCode: "", // 验证码
                  mailCode: "", // 短信验证码
                }
                this.qrcodeTitle = "获取验证码", // 发送验证码文案
                  this.codeImgUrl = "", // 图片
                  this.check = "",
                  this.loginShow = true;
                this.getCodeImg()
              } else if (res.data.data == 201) {
                window.location.href = "./isOk_BSD.html"
              } else {
                this.answerId = res.data.data.answerId;
                res.data.data.resultList.records.forEach(item => {
                  if (item.type == 1 || item.type == 3) {
                    item.answer = "";
                  } else if (item.type == 2) {
                    item.answer = [];
                  }
                  item.options = JSON.parse(item.options)
                })
                this.list = res.data.data.resultList.records;
              }
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err => {
            this.$toast('获取试题失败');
          })
        },

        // 获取参数
        getParameterByName(name, url) {
          if (!url) url = window.location.href;
          name = name.replace(/[\[\]]/g, "\\$&");
          var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
          if (!results) return null;
          if (!results[2]) return "";
          return decodeURIComponent(results[2].replace(/\+/g, " "));
        },
        // 设置复选框
        // setCheckBox(item, index, e) {
        //   var obj = {
        //     questionId: item.id,
        //     answer: item.answer.length > 0 ? item.answer.join(",") : "",
        //     index: index
        //   }
        //   let indexs = this.surveyQuestionAnswerLogBatchParamList.findIndex(item1 => item1.questionId == obj
        //     .questionId)
        //   if (indexs > -1) {
        //     this.surveyQuestionAnswerLogBatchParamList.splice(indexs, 1, obj)
        //   } else {
        //     this.surveyQuestionAnswerLogBatchParamList.push(obj)
        //   }
        // },
        // 设置单选框
        setRadio(item, index, e) {
          var obj = {
            questionId: item.id,
            answer: item.answer,
            index: index
          }
          let indexs = this.surveyQuestionAnswerLogBatchParamList.findIndex(item1 => item1.questionId == obj
            .questionId)
          if (indexs > -1) {
            this.surveyQuestionAnswerLogBatchParamList.splice(indexs, 1, obj)
          } else {
            this.surveyQuestionAnswerLogBatchParamList.push(obj)
          }
        },
        // 设置简答题
        setInput(item, index, e){
          var obj = {
            questionId: item.id,
            answer: item.answer,
            index: index
          }
          let indexs = this.surveyQuestionAnswerLogBatchParamList.findIndex(item1 => item1.questionId == obj
            .questionId)
          if (indexs > -1) {
            this.surveyQuestionAnswerLogBatchParamList.splice(indexs, 1, obj)
          } else {
            this.surveyQuestionAnswerLogBatchParamList.push(obj)
          }
        },
        // 提交
        submit() {
          var arr = []
          this.surveyQuestionAnswerLogBatchParamList.forEach(item => {
            if (item.answer) {
              arr.push(item)
            }
          })
          if (arr.length < this.list.length) {
            this.$toast('还有未作答的题目')
          } else {
            axios({
              url: this.config + "/survey/questionanswerlog/addBatch",
              method: "post",
              headers: {
                'token':this.getToken
              },
              data: {
                otherData: JSON.stringify(this.otherData),
                surveyId: 2,
                answerId:this.answerId,
                surveyQuestionAnswerLogBatchParamList: this.surveyQuestionAnswerLogBatchParamList
              }
            }).then(res => {
              if (res.data.code == 200) {
                window.location.href = "./isOk_BSD.html"
              } else {
                this.$toast(res.data.msg);
              }
            }).catch(err => {
              this.$toast('提交失败');
            })
          }
        },

        // 登录操作--开始
        // 获取随机32位
        generateRandomString() {
          const characters =
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
          let randomString = "";
          for (let i = 0; i < 32; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            randomString += characters.charAt(randomIndex);
          }
          return randomString;
        },
        // 获取图片验证码
        getCodeImg() {
          var numbers = this.generateRandomString();
          this.sidNumber = numbers;
          this.codeImgUrl = this.config + "/passport/captcha?sid=" + numbers;
        },
        // 跳转外链
        toWebUrl(type) {
          switch (type) {
            case "1":
              window.open("https://www.gogowork.cn/cms/article/111");
              break;
            case "2":
              window.open("https://www.gogowork.cn/cms/article/2023080741939871");
              break;
            case "3":
              window.open("https://www.gogowork.cn/cms/article/2023080804851936");
              break;
          }
        },
        // 获取短信验证码
        getCode() {
          var reg = /^1[3456789]\d{9}$/;
          if (reg.test(this.loginObj.mobile) == false) {
            this.$toast("手机号格式错误");
          } else if (this.loginObj.captchaCode == "") {
            this.$toast("图片验证码错误");
          } else {
            axios({
              url: this.config + "/passport/sendcode",
              method: "post",
              data: {
                mobile: this.loginObj.mobile,
                captchaCode: this.loginObj.captchaCode,
                sid: this.sidNumber,
                loginFrom: "4"
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.qrcodeTitle = "请60S后重试";
                var t = 60;
                this.timer = setInterval(() => {
                  t--;
                  this.qrcodeTitle = "请" + t + "S后重试";
                  if (t <= 0) {
                    clearInterval(this.timer);
                    this.qrcodeTitle = "获取验证码";
                  }
                }, 1000);
              } else {
                this.$toast(res.data.msg);
                clearInterval(this.timer);
                this.qrcodeTitle = "获取验证码";
              }
            }).catch(err => {
              this.$toast('发送失败');
            })
          }
        },
        // 登录
        loginBtn() {
          var reg = /^1[3456789]\d{9}$/;
          if (reg.test(this.loginObj.mobile) == false) {
            this.$toast("请输入正确的手机号");
          } else if (this.loginObj.captchaCode == "") {
            this.$toast("请输入图片验证码");
          } else if (this.loginObj.mailCode == "") {
            this.$toast("请输入短信验证码");
          } else if (!this.check) {
            this.$toast("请同意协议");
          } else {
            axios({
              url: this.config + "/passport/login",
              method: "post",
              data: {
                mobile: this.loginObj.mobile,
                openId: "",
                unionId: "",
                code: this.loginObj.mailCode,
                loginFrom: "4",
                identity: 1,
                regInviteId:this.getParameterByName("regInviteId")||0,
                regFrom:this.getParameterByName("regFrom")||0,
                regInviteGroup:this.getParameterByName("regInviteGroup")||0
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.$toast('登录成功');
                this.getToken = res.data.data.token;
                this.userDetail = res.data.data
                sessionStorage.setItem("userDetail",JSON.stringify(res.data.data))
                sessionStorage.setItem("token", res.data.data.token)
                sessionStorage.setItem("uid", res.data.data.id)
                this.loginShow = false;
                setTimeout(()=>{
                  this.getList()
                },800)
              } else {
                this.$toast(res.data.msg);
              }
            }).catch(err => {
              this.$toast('登录失败');
            })
          }
        },
        // 登录操作--结束


      },
      watch: { //监听

      },
      computed: { //计算属性

      },
      filters: {

      },
      created() {
        if(this.getParameterByName("token")){
          this.getToken = this.getParameterByName("token")
        }else{
          this.getToken = ""
        }
      },
      mounted() {
        // 获取图片验证码
        var numbers = this.generateRandomString();
        this.sidNumber = numbers;
        this.codeImgUrl = this.config + "/passport/captcha?sid=" + numbers;
        this.getList()
      }
    })
  </script>
</body>

</html>